<div class="container">
  <div class="row">
    <div class="col">
      <h1 class="d-none d-sm-block h3 mb-3 text-center" i18n>Holdings</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-lg">
      <div class="d-flex">
        <div class="d-flex">
          <div class="d-none d-lg-block">
            <mat-button-toggle-group
              [formControl]="viewModeFormControl"
              [hideSingleSelectionIndicator]="true"
            >
              <mat-button-toggle i18n-title title="Table" value="TABLE">
                <ion-icon name="reorder-four-outline" />
              </mat-button-toggle>
              <mat-button-toggle i18n-title title="Chart" value="CHART">
                <ion-icon name="grid-outline" />
              </mat-button-toggle>
            </mat-button-toggle-group>
          </div>
        </div>
        <div class="align-items-center d-flex flex-grow-1 justify-content-end">
          <gf-toggle
            class="d-none d-lg-block"
            [defaultValue]="holdingType"
            [isLoading]="false"
            [options]="holdingTypeOptions"
            (valueChange)="onChangeHoldingType($event.value)"
          />
        </div>
      </div>
      @if (viewModeFormControl.value === 'CHART') {
        <gf-treemap-chart
          class="mt-3"
          cursor="pointer"
          [baseCurrency]="user?.settings?.baseCurrency"
          [colorScheme]="user?.settings?.colorScheme"
          [dateRange]="user?.settings?.dateRange"
          [holdings]="holdings"
          [locale]="user?.settings?.locale"
          (treemapChartClicked)="onHoldingClicked($event)"
        />
      }
      <div [ngClass]="{ 'd-none': viewModeFormControl.value !== 'TABLE' }">
        <gf-holdings-table
          [baseCurrency]="user?.settings?.baseCurrency"
          [deviceType]="deviceType"
          [hasPermissionToShowQuantities]="false"
          [holdings]="holdings"
          [locale]="user?.settings?.locale"
          (holdingClicked)="onHoldingClicked($event)"
        />
        @if (
          !hasImpersonationId &&
          hasPermissionToCreateActivity &&
          holdings?.length > 0
        ) {
          <div class="text-center">
            <a
              class="mt-3"
              i18n
              mat-stroked-button
              [routerLink]="routerLinkPortfolioActivities"
              >Manage Activities</a
            >
          </div>
        }
      </div>
    </div>
  </div>
</div>
